<template>
  <el-card
      class="playlist-item"
      shadow="hover"
      :body-style="{ padding: '15px', display: 'flex' }"
      @click="selectPlaylist"
  >
    <div class="cover-container">
      <img :src="cover" :alt="title" class="cover">
      <div class="play-icon">
        <el-icon><VideoPlay /></el-icon>
      </div>
    </div>

    <div class="info">
      <h3 class="title">{{ title }}</h3>
      <p class="description">{{ description }}</p>
    </div>

    <div class="action">
      <el-icon><More /></el-icon>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'PlaylistItem',
  props: {
    id: {
      type: Number,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    description: {
      type: String,
      default: ''
    },
    cover: {
      type: String,
      required: true
    }
  },
  methods: {
    selectPlaylist() {
      this.$emit('select', this.id);
    }
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.playlist-item {
  /* 原有样式 */
  cursor: pointer;
  margin-bottom: 15px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
}

.playlist-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  border-color: #d8dbeb;
}

/* 其他原有样式 */
</style>